<template>
    <div>
        <el-row :gutter="20">
            <el-col :span="4">
                <div class="left">
                    <FixedHeightVue>
                        <div class="left_content">
                            <!-- 题库封面 -->
                            <div class="bank_item_img">
                                <div class="mask"></div>
                                <div class="mask_content">
                                    <p>{{ CounrseDetailInfo.operatorName }}</p>
                                    <p>{{ formatData(CounrseDetailInfo.createTime) }}</p>
                                </div>
                                <img src="@/assets/bank.png" alt="" v-if="!CounrseDetailInfo.courseUrl">
                                <img :src="CounrseDetailInfo.courseUrl" alt="" v-else>
                            </div>
                            <!-- 题库名称 -->
                            <div class="left_content_title">课程名称</div>
                            <!-- 分割线 -->
                            <div class="left_content_line"></div>
                            <!-- 题库信息 -->
                            <div class="left_content_info">
                                <div class="left_content_info_item">
                                    <div class="left_content_info_item_title">课程名称：</div>
                                    <div class="left_content_info_item_content">
                                        <span>{{ CounrseDetailInfo.courseName }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </FixedHeightVue>
                </div>
            </el-col>
            <el-col :span="20">
                <div class="right">
                    <FixedHeightVue>
                        <el-scrollbar>
                            <el-tabs v-model="activeName" class="demo-tabs">
                                <el-tab-pane label="学生信息" name="first">
                                    <div class="right_content">
                                        <el-form :inline="true" size="small" :model="formInline">
                                            <el-form-item label="学生姓名">
                                                <el-input v-model="formInline.userName" placeholder="请输入" clearable />
                                            </el-form-item>
                                            <el-form-item label="学生手机号">
                                                <el-input v-model="formInline.phone" placeholder="请输入" clearable />
                                            </el-form-item>
                                            <!-- <el-form-item label="题目类型">
                                    <el-select v-model="formInline.region" placeholder="请选择" clearable>
                                        <el-option label="单选" value="0" />
                                        <el-option label="多选" value="1" />
                                        <el-option label="判断" value="2" />
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="添加时间">
                                    <el-date-picker v-model="formInline.date" type="date" placeholder="请选择" clearable />
                                </el-form-item>
                                <el-form-item label="修改时间">
                                    <el-date-picker v-model="formInline.date" type="date" placeholder="请选择" clearable />
                                </el-form-item> -->
                                            <el-form-item>
                                                <el-button type="primary" @click="onSubmit">搜索</el-button>
                                            </el-form-item>

                                        </el-form>
                                        <div class="opt_btn">
                                            <el-button type="primary" size="small" @click="show = true">添加学生</el-button>
                                        </div>
                                        <!-- 表格 -->
                                        <el-table ref="singleTableRef" tooltip-effect="dark" :data="tableData"
                                            highlight-current-row border stripe align="center" size="small"
                                            style="width: 100%" v-loading="loading">
                                            <el-table-column type="index" label="序号" align="center" width="80" />
                                            <el-table-column property="userName" label="学生姓名" align="center" />
                                            <el-table-column property="phone" label="手机号" align="center" width="180" />
                                            <el-table-column property="courseName" label="课程名称" width="200"
                                                align="center" />
                                            <el-table-column property="submissionPercentage" label="提交作业率"
                                                align="center" width="120" />
                                            <el-table-column property="studentAverageGrade" label="平均成绩" align="center"
                                                width="200">
                                                <template v-slot="{ row }">
                                                    <div class="content">
                                                        {{ row.studentAverageGrade }}
                                                    </div>
                                                </template>
                                            </el-table-column>
                                            <el-table-column property="createTime" label="加入课程时间" align="center"
                                                width="200">
                                                <template v-slot="{ row }">
                                                    <div class="content">
                                                        {{ formatData(row.createTime) }}
                                                    </div>
                                                </template>
                                            </el-table-column>
                                            <el-table-column label="操作" align="center" width="200">

                                                <template #default="{ row }">
                                                    <el-button type="danger" size="small"
                                                        @click="deleteItem(row.id)">删除</el-button>
                                                </template>
                                            </el-table-column>
                                        </el-table>
                                        <div class="page">
                                            <Pagination @getDate="getStudentInfo" :queryNum="queryCount" />
                                        </div>
                                    </div>
                                </el-tab-pane>
                                <el-tab-pane label="作业信息" name="second">
                                    <JobInformation :courseId="CounrseDetailInfo.id" v-if="activeName == 'second'" />
                                </el-tab-pane>
                                <el-tab-pane label="作业情况" name="third">
                                    <HomeworkCorrecting :courseId="CounrseDetailInfo.id" v-if="activeName == 'third'">
                                    </HomeworkCorrecting>
                                </el-tab-pane>
                            </el-tabs>
                        </el-scrollbar>
                    </FixedHeightVue>
                </div>
            </el-col>
        </el-row>
        <!-- 添加学生 -->
        <AddStudentBycourseDia v-model:show="show" :courseId="CounrseDetailInfo.id" @onSubmit="onSubmit" roleType="2" />
        <!-- 预览组件 -->
        <PreviewQuestion v-model:show="preview" />
    </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue"
// 引入路由
import { useRouter } from "vue-router";
const router = useRouter();

import FixedHeightVue from "@/components/base/FixedHeight.vue";
import Pagination from "@/components/base/MyPagination.vue";
import AddStudentBycourseDia from '@/views/teacher/mycourse/dialog/AddStudentBycourseDia'
import PreviewQuestion from '@/views/teacher/mycourse/dialog/PreviewQuestionDia.vue'
import JobInformation from '@/views/teacher/mycourse/components/JobInformation'
import HomeworkCorrecting from '@/views/teacher/mycourse/components/HomeworkCorrecting'

import { queryCourseStudentListApi, deleteCourseStudentApi } from "@/api/index";
import { ElMessage, ElMessageBox } from "element-plus";

const formInline = reactive({
    userName: '',
    phone: '',
})
const CounrseDetailInfo = ref({})
//   获取题库信息  
const info = sessionStorage.getItem("MyCourseDetail")

if (!info) {
    router.push({
        name: 'MyCourseList'
    })
} else {
    CounrseDetailInfo.value = JSON.parse(info)
}

const tableData = ref([
])
// 分页用
const queryCount = ref(1);
// 添加题目
const show = ref(false);
// 预览
const preview = ref(false);
const previewItem = ref(null)

const OnPreviewQuestion = () => {
    preview.value = true;
}

// 格式化时间
const formatData = (cellValue) => {
    var s = new Date(cellValue).toLocaleString();
    return s;
};

// 提交搜索条件
const onSubmit = () => {
    queryCount.value += 1;
};

// 标签页逻辑
const activeName = ref('first')
const loading = ref(false)

// 获取学生信息
const getStudentInfo = async (page) => {
    loading.value = true;
    const params = {
        courseId: CounrseDetailInfo.value.id,
        pageNum: page.pageNum,
        pageSize: page.pageSize,
    }
    for (const key in formInline) {
        if (formInline[key] != null && formInline[key] !== "") {
            params[key] = formInline[key];
        }
    }
    const res = await queryCourseStudentListApi(params)
    loading.value = false;
    if (res.code !== "10000") {
        ElMessage({
            showClose: true,
            message: res.message,
            type: "error",
        });
        return;
    }
    ElMessage({
        showClose: true,
        message: `查询成功!`,
        type: "success",
    });
    tableData.value = res.data.list || [];
    page.totalCount = res.data.totalCount;
}

// 删除课程中的学生
const deleteItem = (id) => {
    ElMessageBox.confirm("确定要删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
    })
        .then(async () => {
            const res = await deleteCourseStudentApi(id)
            if (res.code !== "10000") {
                ElMessage({
                    showClose: true,
                    message: res.message,
                    type: "error",
                })
                return;
            }
            ElMessage({
                showClose: true,
                message: `删除成功!`,
                type: "success",
            })
            onSubmit()
        })
}

onMounted(() => {

})


</script>

<style lang="scss" scoped>
.left {
    border: 1px solid #e4e7ed;
    border-radius: 5px;
    overflow: hidden;
    background-color: #fff;

    &_content {
        padding: 5px;
        cursor: pointer;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .bank_item_img {
            width: 200px;
            height: 250px;
            border-radius: 5px;
            overflow: hidden;

            &:hover .mask {
                opacity: 1;
            }

            .mask_content {
                position: absolute;
                width: inherit;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                color: #fff;
                font-size: 20px;
                font-weight: 600;
                opacity: 0;
                z-index: 9;

                p {
                    text-align: center;
                    margin: 5px 0;
                }
            }

            &:hover .mask_content {
                animation: down_animation 0.5s ease 1 normal forwards;
            }

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }

        .left_content_title {
            font-size: 14px;
            font-weight: 600;
            color: #333;
            margin-top: 10px;
            height: 30px;
            line-height: 30px;
            text-align: center;
        }

        &_line {
            width: 100%;
            border: 0;
            padding-top: 1px;
            background: linear-gradient(to right, transparent, #d0d0d5, transparent);
        }

        .left_content_info {
            .left_content_info_item {
                display: flex;

                &_title {
                    font-size: 14px;
                    font-weight: 600;
                    color: #333;
                    margin-top: 10px;
                    height: 30px;
                    line-height: 30px;
                    text-align: center;
                }

                &_content {
                    font-size: 14px;
                    color: #333;
                    margin-top: 10px;
                    height: 30px;
                    line-height: 30px;
                    text-align: center;
                }
            }
        }
    }
}

.right {
    border: 1px solid #e4e7ed;
    border-radius: 5px;
    background-color: #fff;

    &_content {
        padding: 15px;
    }
}

.demo-tabs {
    padding: 10px;
}
</style>
